import React from "react";
import {Space as AntdSpace, Table as AntTable} from 'antd';
import {renderItems, VJsonComponent, VJsonComponentBase} from "../factory";
import _ from 'lodash'
import {toJS} from "mobx";
import {apply} from "..";

export interface ToolbarVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean

    align?: 'start' | 'end' | 'center' | 'baseline'
    direction?: 'vertical' | 'horizontal'
    size?: 'small' | 'middle' | 'large' | number
    style?: any
    className?: any

    /**
     * 内容元素
     */
    items: any[]
}

export interface ToolbarState {

}

@VJsonComponent({
    view: 'toolbar'
})
export default class Toolbar extends VJsonComponentBase<ToolbarVJsonProp, ToolbarState> {
    static defaultProps = {
        visible: true,
        items: []
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Toolbar.defaultProps
        )
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        return (
            //@ts-ignore
            <AntdSpace key={this.key} view_id={this.key} aria-roledescription={this.view}
                       style={{marginBottom: 16, ...apply(this, toJS(this.props.vjson.style))}}
                       className={apply(this, this.props.vjson.className)}
                       align={apply(this, this.props.vjson.align)}
                       direction={apply(this, this.props.vjson.direction)}
                       size={apply(this, this.props.vjson.size)}
            >
                {
                    ...renderItems(this, this.props.vjson.items)
                }
            </AntdSpace>
        )
    }
}
